<template>
  <div>
    <div
      @click="divClick"
      :style="{ width: '100px', height: '65px', backgroundColor: '#ddd' }"
    >
      div
      <!-- .stop - 阻止事件向上冒泡 -->
      <button @click.stop="btnClick">button按钮</button>
    </div>
    <!-- .prevent - 阻止默认事件 -->
    <a href="https://www.baidu.com" @click.prevent="aClick">百度一下</a>
    <!-- .once - 事件只触发一次 -->
    <p><button @click.once="btnClick">button按钮,点击只触发一次</button></p>
    <!-- .capture - 使用事件捕获模式 -->
    <h2>.capture - 使用事件捕获模式</h2>
    <div @click.capture="divClicked">
      点击我2
      <button @click="buttonClicked">使用捕获模式</button>
    </div>
    <hr />
    <!-- .self - 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
    <h2>.self - 只当事件在该元素本身（而不是子元素）触发时触发回调</h2>
    <div @click.self="divClicked">
      点击我3
      <button @click="buttonClicked">点击按钮不会触发父亲元素事件</button>
    </div>
    <!-- 回车键触发事件 -->
    <h2>.enter - 回车键触发事件</h2>
    <input type="text" @keyup.enter="enterKeyup" />
  </div>
</template>

<script>
export default {
  name: 'page-day9',
  methods: {
    divClick() {
      console.log('divClick')
    },
    btnClick() {
      console.log('btnClick')
    },
    aClick() {
      console.log('aClick')
    },
    divClicked() {
      console.log('divClicked')
    },
    buttonClicked() {
      console.log('buttonClicked')
    },
    enterKeyup(event) {
      console.log('keyup', event.target.value)
    }
  }
}
</script>

<style lang="scss" scoped></style>
